<template>
	<view class="travel-item" @click="goDetail">
		<view class="tripTag">
			<text class="driver" v-if="item.trip_type">车找人</text>
			<text class="passenger" v-else>人找车</text>
		</view>
		<view class="box">
			<image class="background-image" v-if="item.trip_type" src="../../static/images/司机.png" 
			mode="aspectFill"></image>
			<image class="background-image" v-else src="../../static/images/打车.png"
			mode="aspectFill"></image>
			<view class="head">
				<view class="day">{{dayShowText}}</view>
				<view class="time">
					<view class="start_time">{{startTime}}</view>
					<view class="time_connect">-</view>
					<view class="end_time">{{endTime}}</view>
				</view>
				<view class="text">出发</view>
			</view>
			<view class="pos pos_start">
				<view class="left">·</view>
				<view class="right">
					<view class="area">{{from_region}}</view>
					<view class="detail">{{item.from_detail}}</view>
				</view>
			</view>
			<view class="pos pos_end">
				<view class="left">·</view>
				<view class="right">
					<view class="area">{{to_region}}</view>
					<view class="detail">{{item.to_detail}}</view>
				</view>
			</view>
			<view class="tags">
				<view class="tag">车主热情</view>
				<view class="tag">驾驶稳健</view>
				<view class="tag">车内整洁</view>
			</view>
			<view class="bottom">
				<view class="line"></view>
				<view class="outer">
					<view class="user_info">
						<view class="avatar">
							<image src="../../common/images/people/img钟离.webp" mode="aspectFill"></image>
						</view>
						<view class="phone_tail">
							尾号3347
						</view>
						<view class="online_status " v-if="false">
							· 刚刚在线
						</view>
						<view class="online_status online" v-else="true">
							· 在线
						</view>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import {stateFormat, getTimeText, convertRegion, getHourMinByTimestamp} from "@/utils/common.js"
const db = uniCloud.database();

const props = defineProps({
	item:{
		type:Object,
		default(){
			return {}
		}
	}
})	

const dayShowText = computed(()=>{
	return getTimeText(props.item.start_time)
})

const startTime = computed(()=>{
	return getHourMinByTimestamp(props.item.start_time)
})

const endTime = computed(()=>{
	return getHourMinByTimestamp(props.item.end_time)
})
	
const from_region = computed(()=>{
	return convertRegion(props.item.from_region)
})

const to_region = computed(()=>{
	return convertRegion(props.item.to_region)
})	

const goDetail = async()=>{
	let {result:{errCode,data}} = await db.collection("trip-detail")
	.where({_id:props.item._id}).get({
		getOne:true
	});
	if(errCode === 0){
		// 缓存数据，详情页面使用
		uni.setStorageSync(props.item._id, data);
	}
	
	uni.navigateTo({
		url:"/pages/detail/detail?id="+props.item._id
	})
}

</script>

<style lang="scss" scoped>
	.travel-item {
		background: #fff;
		padding: 10rpx 30rpx 30rpx 30rpx;
		border-radius: 30rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
		position: relative;
		.is_browsed{
			position: absolute;
			width: 80rpx;
			height: 80rpx;
			right: 10rpx;
			top: 10rpx;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.1);
			image {
				width: 100%;
				height: 100%;
				background-color: #fff;
				opacity: 0.3;
				transition: opacity 0.3s ease-in-out;
			}
		}
		.tripTag{
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			width: 100rpx;
			height: 50rpx;
			// border: 1rpx solid red;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2rpx 3rpx;
			background: linear-gradient(to right, #b2ebf2, #e0f7fa); /* 渐变背景 */
			
			.driver{
				color: #26c6da;
				font-size: 15px; /* 字体大小 */
				font-weight: bold; /* 字体加粗 */
				text-align: center; /* 居中对齐 */
			}
			.passenger{
				color: #ff8c3d;
				font-size: 15px; /* 字体大小 */
				font-weight: bold; /* 字体加粗 */
				text-align: center; /* 居中对齐 */
			}
		}
		.box {
			position: relative; /* 使子元素绝对定位 */
			.background-image {				
				position: absolute; /* 绝对定位 */
				bottom: 100rpx; /* 距离底部0 */
				right: 12rpx; /* 右侧对齐 */
				width:8vh; /* 宽度80% */
				height: 10vh; /* 高度自动调整 */
				opacity: 0.3; /* 调整透明度 */
				// z-index: 0; /* 设置层级 */
			}
			.head {
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				padding: 12rpx 0;
				font-weight: 900;
				letter-spacing: -2rpx; // 添加整体字间距
				.day {
					font-size: 40rpx;
				}

				.time {
					display: flex;
					justify-content: center;
					align-items: flex-end;
					font-size: 37rpx;
					.start_time,
					.end_time {
						margin: 0 4rpx;						
					}
				}
				.text{
					font-size: 30rpx;
					margin-left: -2rpx; // 调整"出发"文字的左间距
				}
			}

			.pos_start {
				.left {
					color: #FF7D07;
				}
			}
			.pos_end {
				.left {
					color: #5EBB3B;
				}
			}

			.pos {
				display: flex;
				// flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				.left {
					padding-right: 5rpx;
					margin-top: -20rpx;
					font-size: 60rpx;
				}

				.right {
					.area {
						font-size: 25rpx;
						font-weight: bold;
						color: #333;
					}

					.detail {
						font-size: 20rpx;
						color: #666;
					}
				}
			}

			.tags{
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				padding: 5rpx 0;
				.tag{					
					padding: 5rpx 10rpx;
					margin-right: 20rpx;
					font-size: 20rpx;
					border-radius: 10rpx;	
					box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2),
					                -2px -2px 5px rgba(255, 255, 255, 0.5); /* 阴影效果 */
				}
				
				/* 使用伪类选择器定义不同的背景和字体颜色 */
				.tag:nth-child(1) {
				    background: #f9cdad;
					color: #fe4365; /* 深红色字体 */
				}
				
				.tag:nth-child(2) {
				    background-color: #F9D08B; /* 浅绿色背景 */
				    color: #F97D81; /* 深绿色字体 */
				}
				
				.tag:nth-child(3) {
				    background-color: #ccccff; /* 浅蓝色背景 */
				    color: #4F86C6; /* 深蓝色字体 */
				}
			}
			
			.bottom {
				.line {
					width: 100%;
					height: 3rpx;
					background: #f0f0f0;
					margin: 15rpx 0;
				}

				.outer {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.user_info {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						// background: #888;
						width: fit-content;

						.avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.phone_tail {
							padding-left: 12rpx;
							font-size: 30rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}

						.online_status {
							padding: 10rpx 15rpx;
							background-color: #f2f2f2;
							border-radius: 20rpx;
							font-size: 25rpx;
							font-weight: bold;
							color: #626262;
						}
						.online{
							color: #53b53c;
							background-color: #eef9ef;
						}
					}
				}



			}
		}
			
	}
	// .driverbg::before {
	// 	content: "";
	// 	background-image: url("../../common/images/car_2_1.png"); // 替换为实际图片路径
	// 	background-repeat: no-repeat;
	// 	background-position: right bottom;
	// 	background-size: auto 30%;
	// 	width: 80%;
	// 	height: 100%;
	// 	position: absolute;
	// 	bottom: 170rpx;
	// 	right: 0;
	// 	z-index: 0;
	// 	opacity: 0.3; // 调整透明度
	// }
	.personbg::before {
		content: "";
		background-image: url("../../common/images/two_people.png"); // 替换为实际图片路径
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: auto 50%;
		width: 80%;
		height: 100%;
		position: absolute;
		bottom: 123rpx;
		right: 0;
		z-index: 0;
		opacity: 0.3; // 调整透明度
	}

</style>